<template>
  <section>
    <div class="link-view"
         @click="changeView">查看合单属性 {{view?'收起':'展开'}}>></div>
    <div v-if="view">
      <div class="content-module">
        <label>合单属性</label>
        <div>合同编号：{{combineDetails.contractNo}}</div>
      </div>
      <DescriptionsPanel class="d-panel"
                         :element-array="combineAttribute"
                         :element-data="elementData" />
      <ModuleTitle :title="'合单费用'"
                   :tag-label="tagLabel"
                   tag-view />
      <TransportQuote v-if="combineFeeColumn.length"
                      class="mt15"
                      isOneBill
                      disabled
                      :title="'合单费用类型明细'"
                      :quotation-column.sync="combineFeeColumn"
                      :data-list="combineFeeData" />
      <TemplateDetail v-if="matchId"
                      :title="'合单匹配合约明细'"
                      v-bind="$attrs" />
      <SurchargeFee title="合单补充费用明细"
                    :data-list.sync="surchargeFees" />
    </div>
  </section>
</template>

<script>
import TransportQuote from "@/views/quote/transport/components/TransportQuote.vue";
import SurchargeFee from "@/views/quote/transport/components/SurchargeFee.vue";
import TemplateDetail from "./TemplateDetail.vue"
import DescriptionsPanel from "./Descriptions.vue"
import { returnThousandDigit } from "@/libs/util.js";
import { combineAttribute } from "@components/orderDetail/orderData";
import { onebill, quotation } from "@/api/index";
export default {
  name: "CombineAttribute",
  props: {
    combineId: Number
  },
  components: { DescriptionsPanel, TransportQuote, SurchargeFee, TemplateDetail },
  data () {
    return {
      view: false,
      combineAttribute,
      combineDetails: {},
      combineFeeData: {},
      surchargeFees: [],
      matchId: null
    }
  },
  computed: {
    elementData () {
      const { calculateValue, distinctFromAddress, distinctToAddress } = this.combineDetails
      let deliveryNum = `${distinctFromAddress.length}提${distinctToAddress.length}送`
      return {
        ...this.combineDetails,
        deliveryNum: deliveryNum,
        calculateValue: calculateValue ? returnThousandDigit(calculateValue) : 0
      }
    },
    tagLabel () {
      return this.matchId ? '匹配合约' : '手动报价'
    },
    combineFeeColumn () {
      let column = [
        { label: "合单运费", name: "transportFee", type: 'text' },
        { label: "提货费", name: "pickFee", type: 'text' },
        { label: "送货费", name: "deliverFee", type: 'text' },
        { label: "装货费", name: "loadFee", type: 'text' },
        { label: "卸货费", name: "unloadFee", type: 'text' },
        { label: "保险费", name: "insureFee", type: 'text' },
        { label: "税费", name: "taxFee", type: 'text' },
      ]
      if (this.combineDetails?.price?.minCost) {
        column.push(
          { label: "最低费用", name: "minCost", type: 'text' },
        )
      }
      column.push(
        { label: "补充费用", name: "surchargeFee", type: 'text' },
        { label: "总费用", name: "totalFee", type: 'total' }
      )

      return column;
    },
  },
  created () {
    this.getCombineDetail();
    this.getValidQuote();
  },
  methods: {
    changeView () {
      this.view = !this.view
    },
    async getCombineDetail () {
      let { code, data } = await onebill.getCombineDetail(this.combineId);
      if (code === 0) {
        this.combineDetails = data;
      }
    },
    async getValidQuote () {
      let { data } = await quotation.getValidCombineQuotation(this.combineId);
      if (data) {
        this.combineFeeData = [{ ...data, minCost: data?.minimumFee }];
        this.surchargeFees = data?.surchargeFees || [];
        this.matchId = data?.matchId;
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.link-view {
  color: var(--prev-icon-color-bule);
  margin-bottom: 13px;
  cursor: pointer;
}
.content-module {
  background-color: var(--prev-border-color-extra-grey);
  display: flex;
  justify-content: space-between;
  padding: 10px;
}
.d-panel {
  padding: 20px 36px;
}
.mt15 {
  margin-top: 15px;
}
</style>